<!--这是添加关联组件-->
<template>
  <div>
    <p class="filter"></p>
    <div class="addBox">
      <h3 class="fixTitle">
        <div>添加<span>{{this.relType==1?'资料':(this.relType==2?'社群':'测评')}}</span>关联 </div>
        <p>
          <em style="cursor: pointer;">
            <svg-icon icon-class="jian" class="font-size16"/>
          </em><em style="cursor: pointer;">
          <svg-icon class="font-size16" icon-class="fullScreen"/>
        </em><em style="cursor: pointer;" @click="closeAdd">
          <svg-icon icon-class="cha" class="font-size16"/>
        </em>
        </p>
      </h3>
      <div style="padding: 0 20px;">
        <div style="border-top: 1px solid #eee;padding-top: 10px;">
          <el-input v-model="listQuery.searchName" clearable :placeholder="relType==1?'请输入关联资料名称':(relType==2?'请输入关联社群名称':'请输入关联测评名称')" style="width: 200px;"></el-input>
          <el-button type="success" icon="el-icon-search" @click="searchByName">搜索</el-button>
          <el-checkbox-group class="checkbox" v-model="checkList" :max="5" v-loading="formLoading">
            <el-checkbox v-for='(item) in relatedList' :key='item.id' :label="item" class="userRadio">
              <b>{{item.name}}（ID：{{item.id}}）</b>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="c-textAlign-c">已经关联个数：<span class="red">{{objData.length}}</span>/5</div>
        <p style="text-align: center;line-height: 80px;">
          <el-button type="primary" icon="el-icon-check" @click="saveRelated">保存</el-button>
          <el-button type="info" @click="closeAdd">取消</el-button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  import { toGetRelData } from '@/api/common'
  export default {
    components: {},
    props: [
      'relType',
      'objData',
      'columnId'
    ],
    data() {
      return {
        type: 0,
        relatedList: [],
        checkList: [],
        formLoading: false,
        listQuery: {
          searchName: null
        }
      }
    },
    mounted() {
      if (this.relType) {
        this.getRelData()
      }
    },
    watch: {
      'relType': function(newRelType, oldRelType) {
        if (newRelType != oldRelType) {
          this.getRelData()
        }
      }
    //      'objData': function(newObjData, oldObjData) {
    //        if (newObjData.length != oldObjData.length) {
    //          console.log('objData', this.objData)
    //          this.getRelData()
    //        }
    //      }
    },
    methods: {
      saveRelated() {
        if (this.objData.length + this.checkList.length > 5) {
          this.$notify({
            title: '提示',
            message: '最多关联5条数据！',
            type: 'warning'
          })
          return
        }
        this.$emit('hideAddRelated', { data: this.checkList, relType: this.relType })
        this.checkList = []
        this.relatedList = []
      },
      searchByName() {
        this.getRelData()
        this.listQuery.searchName = ''
      },
      getRelData() {
        var data = []
        if (this.relType == 1) {
          data = { objData: this.objData, relType: 8, searchName: this.listQuery.searchName }
        }
        if (this.relType == 2) {
          data = { objData: this.objData, relType: 10, searchName: this.listQuery.searchName }
        }

        if (this.relType == 3) {
          data = { objData: this.objData, relType: 11, searchName: this.listQuery.searchName }
        }
        this.formLoading = true
        toGetRelData(data)
          .then(res => {
            this.relatedList = res.data.data
            this.formLoading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      closeAdd() {
        this.$emit('closeAddRelated', false)
        this.relatedList = []
      }
    }
  }
</script>
<style scoped>
  p, h3 {
    margin: 0;
  }
  .red {
    color: red;
  }
  .addBox {
    /* width: 600px; */
    height: 550px;
    background: #fff;
    position: fixed;
    left: 25%;
    right: 25%;
    bottom: 15%;
    top: 5%;
    z-index: 120;
  }
  .checkbox {
    height: 350px;
    overflow: auto;
  }
  .fixTitle {
    position: relative;
    width: 100%;
  }

  .userRadio {
    text-align: left;
    width: 100%;
    margin: 10px 0;
  }

  .headImg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 100%;
  }
</style>
